<template>
    <div class="reinstall-pass">
        <Header to='/' title="密码重置"></Header>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <span type="primary" @click="makeSure()">确定</span>
        </el-form>
    </div>
</template>

<script>
import Header from '../common/Header'
import { getLocalStorage } from '../../utils/localStorage'
import { garbageMixin } from '../../utils/mixin'
import Axios from 'axios'
import qs from 'qs'

export default {
  mixins: [garbageMixin],
  components: {
    Header
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        this.determine = true
        callback()
      }
    }

    return {
      determine: false,
      ruleForm: {
        pass: '', // 密码
        checkPass: ''// 确认密码
      },
      rules: {
        pass: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    makeSure () {
      let datas = qs.stringify({
        password: this.ruleForm.pass,
        phone: getLocalStorage('userPhone') // 需要把username传过来
      })
      if (this.ruleForm.checkPass === this.ruleForm.pass) {
        Axios.put('/user/resetPwd', datas).then(res => {
          console.log(res)
          if (res.data.code === 1) {
            this.$message({
              message: '密码修改成功，请重新登录',
              type: 'sucess'
            })
            this.$router.push('/personal/login')
          }
          if (res.data.code === 10001) {
            this.$message({
              message: '密码的长度为6-18，请重新输入',
              type: 'warning'
            })
          }
        })
      } else {
        this.$message({
          message: '两次密码输入不一致',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global';
.reinstall-pass {
    .el-form {
        margin-top: 12px;
        position: relative;
        .el-form-item {
            margin-left: -22px;
            margin-bottom: 22px;
        }
        span {
            font-size: 13px;
            position: absolute;
            top: -36px;
            right: 12px;
        }
    }
}
</style>
